<template>
  <div class="list-container">
    <el-menu class="menu" :default-active="defaultActive">
      <el-menu-item
        v-for="item in menuList"
        :key="item.label"
        :index="item.label"
      >
        {{ item.label }}
      </el-menu-item>
    </el-menu>
    <mu-list textline="three-line">
      <template v-for="list in lists">
        <mu-sub-header :key="list.header">{{ list.header }}</mu-sub-header>
        <template v-for="item in list.options">
          <PackageItem
            v-if="item.type === 'package' || item.type === 'individual'"
            :data="item"
            :key="item.label"
            showAddBtn
          />
          <StaffItem
            v-if="item.type === 'staff'"
            @click="handleClick({ id: item.id, type: item.type })"
            :data="item"
            :key="item.id"
            showAddBtn
          />
          <OrderItem
            v-if="item.type === 'order'"
            @click="handleClick({ id: item.id, type: item.type })"
            :data="item"
            :key="item.id"
          />
        </template>
      </template>
    </mu-list>
  </div>
</template>

<script>
import OrderItem from "@/components/ListItem/OrderItem.vue";
import PackageItem from "@/components/ListItem/PackageItem.vue";
import StaffItem from "@/components/ListItem/StaffItem.vue";
export default {
  name: "IndexList",
  components: {
    OrderItem,
    PackageItem,
    StaffItem,
  },
  props: {
    lists: Array,
    menuList: Array,
  },
  computed: {
    defaultActive() {
      return this.menuList.length > 0 ? this.menuList[0].label : "";
    },
  },
  methods: {
    handleClick(item) {
      this.$emit("clickItem", item);
    },
  },
};
</script>

<style scoped>
.list-container {
  display: flex;
  min-height: calc(100vh - var(--header-height) - var(--footer-height));
}
.menu {
  min-width: 80px;
  max-width: 8em;
}
.menu >>> .el-menu-item {
  height: auto;
  white-space: initial;
  line-height: 2.5em;
  padding: 1em 0.5em !important;
}
</style>
